<template>
  <view class="content">
    <view class="title_box">
      <text class="green_ornament"></text>
      <text>实验任务详情</text>
    </view>
    <view class="li_box">
      <view class="li_content">
        <view class="li_label">实验时间</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">项目名称</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">原料属性</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">样品来源</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">发起理由</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
      </view>
    </view>
    <u-line color="#c2c9c4" />
    <view class="li_content" style="flex-direction: column;align-items: start;">
      <view class="li_label">发起理由</view>
      <view class="li_input" style="width: 100%">
        <textarea class="textarea_border border_input" readonly />
      </view>
    </view>
    <u-line color="#c2c9c4" />
    <view class="li_content" style="flex-direction: column;align-items: start;">
      <view class="li_label">检测项目</view>
      <view class="li_input" style="width: 100%">
        <textarea class="textarea_border border_input" readonly />
      </view>
    </view>
    <view class="li_box" style="margin-top: 40rpx">
      <view class="li_content">
        <view class="li_label">实验员</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验助手</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验对象</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">委托人</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验类别</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验阶段</view>
        <view class="li_input">
          <input class="border_input" readonly type="text" />
        </view>
      </view>
    </view>
    <!-- <view class="btn_box">接受任务</view> -->
    <view class="btn_box">实验结果反馈</view>
  </view>
</template>
<script>
export default {
  data () {
    return {
      styles: {
        borderColor: '#1a512c'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 30rpx;
  background-color: #e3ede2;
  font-size: 32rpx;
  color: #1a512c;
  .title_box {
    display: flex;
    align-items: center;
    .green_ornament {
      width: 8rpx;
      height: 30rpx;
      background-color: #1a512c;
      margin-right: 20rpx;
    }
  }
  .li_box {
    margin-top: 20rpx;
  }
}
.li_content {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      .li_label{
        font-weight: 700;
        margin-right: 30rpx;
        width: 20%;
      }
      .li_input {
        width: 80%;
        .border_input {
          border: 2rpx solid #1a512c;
          border-radius: 10rpx;
          height: 50rpx;
          width: 100%;
        }
      }
    }
    .textarea_border {
      margin-top: 20rpx !important;
      height: 200rpx !important;
    }
    .btn_box {
      background-color: #1b9c46;
      color: #fff;
      font-size: 34rpx;
      font-weight: 700;
      width: 100%;
      height: 80rpx;
      border-radius: 10rpx;
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
</style>